<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.jose.photogallery.domain.Photo" %>

<%
	User user = (User) request.getAttribute("user");
	Photo photo = (Photo) request.getAttribute("photo");
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Share-a-Photo! | Photo: <%= photo.getCaption() %></title>
		<link type="text/css" rel="stylesheet" href="/static/css/reset.css"  media="all" /> 
		<link type="text/css" rel="stylesheet" href="/static/css/main.css" media="all" />
		
		<style type="text/css">
			#container { position:relative; height:30px; }
			#container > * { position:absolute; height:30px; left:0; top:0; }
	
			#loader {display:none;padding-left:20px; background:url(/static/img/crystal-arrows.gif) no-repeat center left;}
		</style>
		
		<!-- gallery page js -->
		<script type="text/javascript" src="/static/js/jquery.min.js"></script>
		<script type="text/javascript" src="/static/js/jquery-ui.custom.min.js"></script>
		
		
		<!-- Star Rating widget -->
		<script type="text/javascript" src="/static/js/jquery.ui.stars.js"></script>
		<link rel="stylesheet" type="text/css" href="/static/css/jquery.ui.stars.css"/>
		
		<script type="text/javascript">
			$(function(){
				$("#rating").children().not("select, #rating_title").hide();
	
				// Create caption element
				$caption = $('<div id="caption"/>');
	
				// Create stars
				$("#rating").stars({
					inputType: "select",
					oneVoteOnly: true,
					captionEl: $caption,
					callback: function(ui, type, value)
					{
						// Hide Stars while AJAX connection is active
						//$("#rating").hide();
						//$("#loader").show();
						
						// Display message to the user at the begining of the request
						$("#message").text("Saving...").fadeIn(30);
						
						// Send request to the server usign POST method
						/* NOTE:
							For AJAX call we expect an jason object to be returned.
							The Json object contains additional data we can use to update other elements on the page.
						*/
						
						$.post("/rate", $("#rating").serialize(), function(json)
						{
							//$("#ajax_response").html(data);
							
							// Show Stars
							//$("#loader").hide();
							//$("#rating").show();
							if (json.success) {
								// Change widget's title
								$("#rating_title").text("Average rating");
								
								// Select stars from "Average rating" control to match the returned average rating value
								ui.select(Math.round(json.avg));
								
								// Update widget's caption
								$caption.text(" (" + json.votes + " votes; " + json.avg + ")");
								
								// Display confirmation message to the user
								$("#messages").text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);
								
							} else {
								$("#messages").text(json.msg);
							}
							
							// Hide confirmation message after 2 secs...
							setTimeout(function(){
								$("#messages").fadeOut(1000)
							}, 2000);
							
						}, "json");
					}
	
				});
	
				// Append caption element !after! the stars
				$caption.appendTo("#rating");
				
				// Create elemnent to use for confirmation messages
				$('<div id="messages"/>').appendTo('#rating');
			});
		</script>
	</head>
	<body>
		<!-- header -->
		<div id="header">
			<h1><a href="/">Share-a-Photo</a></h1>
			<div id="user-bar">
				<% if(user == null){ %>
						Welcome, please <a href="<%=request.getAttribute("loginUrl") %>">login</a>
				<% } else { %>
						<span id="login-name"><%= user.getNickname() %></span> <a href="/upload">Upload a photo</a> | <a href="<%=request.getAttribute("logoutUrl") %>">logout</a>
				<% } %>
			</div>
		<!-- /header -->
		</div>
		
		<!-- content-wrap -->
		<div id="content-wrap">
			<!-- content -->
			<div id="content">
				<div id="main">
					<h1><%= photo.getCaption() %></h1>
					
					<div id="img">
						<img src="<%= photo.getImageURLResize() %>" alt="" />
					</div>
					
					
					
					<% if ( user != null){ %>
						<div class="ratings">
							<div class="rating-L">
								<form id="rating" action="/rate" method="post">
			        			
			        				<strong id="rating_title">Rate this: </strong>
			        				
					        		<input type="hidden" name="key" value="<%= photo.getBlobKey() %>" />
					        		<label for=""></label>
							     	<select name="vote">
							        	<option value="0">Bad</option>
							        	<option value="1">Not so great</option>
							        	<option value="2">Not That Bad</option>
							        	<option value="3">Average</option>
							        	<option value="4">Good</option>
							        	<option value="5">Excellent</option>
							    	</select>
							    	<input type="submit" value="rate!" />
								</form>
							</div>
		        		</div>
		        		
		        		
						<% if(photo.getUser().equals(user.getUserId())){ %>
							<div id="photoMenu">
								<a class="btn" href="/edit?key=<%= photo.getBlobKey() %>"><span>Edit</span></a>
								<a class="btn" href="/"><span>Delete</span></a>
							</div>
					<% 		} 
						}
					%>
				</div>
				
				<div id="sidebar">
					<h1>Description:</h1>
					<p><%= photo.getDescription() %></p>
				</div>
				
			<!-- /content -->
			</div>
			
		<!-- /content-wrap -->
		</div>
		
		<!-- footer -->
		<div id="footer">
			<p>Share-a-Photo | Powered by <a href="http://code.google.com/appengine/">Google App Engine</a></p>
		<!-- /footer -->
		</div>
	</body>
</html>